<template>
  <view class="container">
	  
	  <custom-status-bar></custom-status-bar>
	  
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <uni-icons type="left" size="20" color="#1890ff"></uni-icons>
        <text>返回</text>
      </view>
      <text class="title">地址管理</text>
    </view>

    <!-- 地址列表 -->
    <view class="address-list" v-if="addresses.length>0">
      <view v-for="(address,index) in addresses" :key="address.id" class="address-item">
        <view class="address-info">
          <text class="name">{{ address.name }}</text>
          <text class="phone">{{ address.tel }}</text>
          <text v-if="address.isDefault" class="default-tag">默认</text>
          <view class="address-detail">{{ address.addressDetail }}</view>
        </view>
       <uv-icon name="edit-pen" size="30" @click="editAddress(index)"></uv-icon>
      </view>
    </view>
	
	<template v-else>
		<uv-empty mode="list" class="center"></uv-empty>
	</template>
	
	

    <!-- 新增地址按钮 -->
	 <view class="fixed-bottom">
    <button class="add-btn" @click="addAddress">新增地址</button>
	</view>
  </view>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
import  { findAddress } from "@/api/index.js"

// 模拟地址数据
const addresses = ref([]);

onMounted(async()=>{
	const res =await  findAddress(uni.getStorageSync('coffee_token'))
	console.log("res:",res)
	if(res.code===20000){
		addresses.value = res.result
	}
})


// 编辑地址
const editAddress = (index) => {
 uni.navigateTo({
 	url:`/pages/address/edit?index=${index}`
 })
};

// 新增地址
const addAddress = () => {
  uni.navigateTo({
  	url:'/pages/address/add'
  })
}

const goBack = ()=>{
	const pages = getCurrentPages();
	if (pages.length > 1) uni.navigateBack();
		else  uni.switchTab({ url: '/pages/index/index' });
}


</script>
<style scoped>
.container {
	position: relative;
	padding: 0 20rpx;
	background-color: #eee;
	min-height: 100vh;
}

.header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
}

.back-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	font-size: 28rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.address-list {
  margin-top: 20rpx;
}

.address-item {
  background: white;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.address-info {
  flex: 1;
}

.name {
  font-size: 28rpx;
  font-weight: bold;
}

.phone {
  font-size: 24rpx;
  color: #666;
  margin-left: 20rpx;
}

.default-tag {
  background: #232773;
  color: white;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  font-size: 20rpx;
  margin-left: 20rpx;
}

.address-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 20rpx;
}

.edit-icon {
  display: flex;
  align-items: center;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  background: white;
  /* border-top: 1rpx solid #eee; */
  box-sizing: border-box;
}


.add-btn {
  background: #232773;
   color: white;
   border-radius: 60rpx;
   padding: 10rpx 20rpx;
   font-size: 32rpx;
   width: 100%;
   box-sizing: border-box;
}

.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 160px;
	height: 160px;

}

</style>